<template>
  <component is="a-drawer" v-model:visible="visible" width="65%" :title="title" :footer="false">
    <!-- 表单信息 start -->

    <a-descriptions :column="3" layout="vertical" bordered>
      <a-descriptions-item label="订单号">{{ formData.order?.order_no }}</a-descriptions-item>
      <a-descriptions-item label="订单类型">
        <sa-dict v-if="formData.order" :value="formData.order.order_type" dict="app_goods_type"></sa-dict>
      </a-descriptions-item>
      <a-descriptions-item label="订单状态">
        <sa-dict v-if="formData.order" :value="formData.order.order_status" dict="app_order_status"></sa-dict>
      </a-descriptions-item>
      <a-descriptions-item label="支付状态">
        <sa-dict v-if="formData.order" :value="formData.order.pay_status" dict="app_pay_status"></sa-dict>
      </a-descriptions-item>
      <a-descriptions-item label="支付方式">
        <sa-dict v-if="formData.order" :value="formData.order.pay_method" dict="app_pay_way"></sa-dict>
      </a-descriptions-item>
      <a-descriptions-item label="支付时间">
        {{ formData.order?.pay_time || '' }}
      </a-descriptions-item>
    </a-descriptions>

    <a-tabs default-active-key="1" class="mt-4">
      <a-tab-pane key="1" title="订单信息">
        <a-divider orientation="left">用户信息</a-divider>
        <a-descriptions :column="3" class="p-4" :value-style="{ width: '33.3%' }">
          <a-descriptions-item label="用户账号">{{ userInfo?.account }}</a-descriptions-item>
          <a-descriptions-item label="用户昵称">{{ userInfo?.nickname }}</a-descriptions-item>
          <a-descriptions-item label="绑定手机">{{ userInfo?.mobile }}</a-descriptions-item>
        </a-descriptions>
        <template v-if="formData.order && formData.order.order_type == 2">
          <a-divider orientation="left">收货信息</a-divider>
          <a-descriptions :column="2" class="p-4">
            <a-descriptions-item label="收货人">{{ formData.address?.name }}</a-descriptions-item>
            <a-descriptions-item label="收货电话">{{ formData.address?.mobile }}</a-descriptions-item>
            <a-descriptions-item label="收货地址">
              {{ formData.address?.province }}{{ formData.address?.city }}{{ formData.address?.area
              }}{{ formData.address?.address }}
            </a-descriptions-item>
          </a-descriptions>
        </template>
        <a-divider orientation="left">订单信息</a-divider>
        <a-descriptions :column="3" class="p-4" :value-style="{ width: '33.3%' }">
          <a-descriptions-item label="下单时间">{{ formData.order?.create_time }}</a-descriptions-item>
          <a-descriptions-item label="订单金额">￥{{ formData.order?.order_price }}</a-descriptions-item>
          <a-descriptions-item label="支付金额">￥{{ formData.order?.pay_price }}</a-descriptions-item>
        </a-descriptions>
        <template v-if="formData.order && formData.order.order_type == 2">
          <a-divider orientation="left">发货信息</a-divider>
          <a-descriptions :column="2" class="p-4">
            <a-descriptions-item label="发货状态">{{
              formData.order?.delivery_status == 1 ? '已发货' : '未发货'
            }}</a-descriptions-item>
            <a-descriptions-item label="发货时间">{{ formData.order?.delivery_time }}</a-descriptions-item>
            <a-descriptions-item label="发货信息">{{ formData.order?.delivery_remark }}</a-descriptions-item>
          </a-descriptions>
        </template>
        <a-divider orientation="left">订单备注</a-divider>
        <div class="p-4">
          {{ formData.order?.remark }}
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="商品信息">
        <a-descriptions :column="1" class="p-4" bordered>
          <a-descriptions-item label="商品图片">
            <a-avatar :size="64" :image-url="formData.order?.cover_image" shape="square"></a-avatar>
          </a-descriptions-item>
          <a-descriptions-item label="商品名称">{{ formData.order?.goods_name }}</a-descriptions-item>
          <a-descriptions-item label="商品单价">￥{{ formData.order?.goods_price }}</a-descriptions-item>
          <a-descriptions-item label="购买数量">{{ formData.order?.goods_num }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="3" title="评价信息">
        <a-descriptions :column="1" class="p-4" bordered>
          <a-descriptions-item label="服务"
            ><a-rate v-if="formData.comment" :default-value="formData.comment.score_first" readonly
          /></a-descriptions-item>
          <a-descriptions-item label="速度"
            ><a-rate v-if="formData.comment" :default-value="formData.comment.score_second" readonly
          /></a-descriptions-item>
          <a-descriptions-item label="产品"
            ><a-rate v-if="formData.comment" :default-value="formData.comment.score_third" readonly
          /></a-descriptions-item>
          <a-descriptions-item label="环境"
            ><a-rate v-if="formData.comment" :default-value="formData.comment.score_four" readonly
          /></a-descriptions-item>
          <a-descriptions-item label="建议">{{ formData.comment?.content }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
    </a-tabs>

    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import api from '../../api/order/order'
import user from '../../api/user/user'

const emit = defineEmits(['success'])
// 引用定义
const visible = ref(false)

let title = computed(() => {
  return '订单详情'
})

// 表单信息
const formData = ref({})
const userInfo = ref({})

// 打开弹框
const open = async (id) => {
  visible.value = true
  await initPage(id)
}

// 初始化页面数据
const initPage = async (id) => {
  const resp = await api.read(id)
  formData.value = resp.data
  const resp2 = await user.read(resp.data.order.user_id)
  userInfo.value = resp2.data
}

defineExpose({ open })
</script>
